import { View, Text, Image } from "@tarojs/components";
import Taro, { useLoad, useUnload } from "@tarojs/taro";
import { Button, NavBar } from "@nutui/nutui-react-taro";
import { ArrowLeft } from '@nutui/icons-react-taro'
import { useEffect, useState } from "react";
import { navigateTo, getParams, secondsToMinutes } from "../../../common/_";
import { iconKsqk } from "../../../assets/files";
import "./index.scss";

export default function TestResult() {
  const [statusBarHeight, setStatusBarHeight] = useState(47)
  const [exam, setExam] = useState({})

  useLoad(() => {
    setExam(getParams().data.exam)
  });

  useEffect(() => {
    Taro.getSystemInfoAsync({
      success(res) {
        console.log(res);
        setStatusBarHeight(res.statusBarHeight)
      }
    })
  }, [])

  useUnload(()=>{
    _handleback()
  })

  function _handleback() {
    Taro.switchTab({
      url: '/pages/home/index'
    })
  }

  function renderFenColor(num) {
    if (num === exam?.scoreFull) {
      return '#FFD74A'
    } else {
      return '#FB605C'
    }
  }

  function toDetail (examResult) {
    navigateTo('/pages/text-record-detail/index',{examResult,userExamId:exam.id })
  } 

  return (
    <View className="resultWrap">
      <View className="homebg"></View>
      <NavBar
        style={{ marginTop: statusBarHeight, backgroundColor: 'transparent' }}
        back={
          <>
            <ArrowLeft />
          </>
        }
        onBackClick={(e) => _handleback()}
      >
        <span>测试结果</span>
      </NavBar>



      <View className="anseWrap">
        <View className="circleWrap">
          <View className="circle"></View>
          <Text>本次测试共{exam?.subjectTotal}题，满分{exam?.scoreFull}分</Text>
        </View>
        <View className="sofeWrap">
          <View className="fenWrap">
            <Text className="fenshu" style={{ color: renderFenColor(exam?.scoreTotal) }}>{exam?.scoreTotal}</Text>
            <Text className="fenUnit" style={{ color: renderFenColor(exam?.scoreTotal)}}>分</Text>
          </View>
          <View>
            <Text style={{ color: '#ABABAB' }}>{exam?.scoreTotal < exam?.scoreFull ? '再接再厉哦~' : '太棒了！！您全部答对了'}</Text>
          </View>
        </View>
        <View className="resultType">
          <Text>测试类型:</Text>
          <Text>{exam?.questionTypeName}</Text>
        </View>
      </View>


      <View className="anseWrap" style={{marginTop:'24px'}}>
        <View className="kWrap">
          <Image className="kIcon" src={iconKsqk} />
          <Text className="kTit">测试情况</Text>
        </View>
        <View className="daanWrap">
          <View className="anWrap">
            <Text className="anLabel">一共</Text>
            <Text className="anValue" style={{color:"#6486FF"}}>{exam?.subjectTotal}题</Text>
          </View>
          <View className="line"></View>
          <View className="anWrap">
            <Text className="anLabel">答对</Text>
            <Text className="anValue" style={{color:"#54C8A1"}}>{exam?.subjectRightTotal}题</Text>
          </View>
          <View className="line"></View>
          <View className="anWrap">
            <Text className="anLabel">答错</Text>
            <Text className="anValue" style={{color:"#FA605E"}}>{exam?.subjectWrongTotal}题</Text>
          </View>
          <View className="line"></View>
          <View className="anWrap">
            <Text className="anLabel">总用时</Text>
            <Text className="anValue" style={{color:"#415FFF"}}>{secondsToMinutes(exam?.examRelaTotal/1000)}</Text>
          </View>
        </View>


      </View>

      <View className="bottomBtnWrap">
        <View style={{ flex: 1, marginLeft: '6px', marginRight: '6px'  }}>
          <Button onClick={()=>toDetail("")} type="info" size="large" block >
            全部解析
          </Button>
        </View>
        <View style={{ flex: 1, marginLeft: '6px', marginRight: '6px' }}>
          <Button onClick={()=>toDetail(2)} type="primary" size="large" block>
            错题解析
          </Button>
        </View>


      </View>
    </View>
  );
}
